<script lang="ts" setup>
import type { CommentApi } from '#/api/wedding/comment';

import { ref, computed, onMounted } from 'vue';

import { Button, Empty, Spin, message } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import { useUserStore } from '@vben/stores';

import { getTargetComments, toggleLike } from '#/api/wedding/comment';

import CommentItem from './CommentItem.vue';

const props = defineProps<{
  targetType: 'dress' | 'photographer' | 'makeupartist' | 'package';
  targetId: number;
  showReplies?: boolean;
}>();

const emit = defineEmits<{
  refresh: [];
}>();

const userStore = useUserStore();
const loading = ref(false);
const comments = ref<CommentApi.Comment[]>([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});

// 当前用户ID
const currentUserId = computed(() => userStore.userInfo?.id);

// 过滤可见的评论
const visibleComments = computed(() => {
  return comments.value.filter((comment) => {
    // 用户自己的评论，无论审核状态都能看到
    if (comment.userId === currentUserId.value) {
      return true;
    }
    // 其他人的评论，只有审核通过才能看到
    return comment.status === 'approved';
  });
});

// 加载评论列表
async function loadComments() {
  try {
    loading.value = true;
    const result = await getTargetComments(props.targetType, props.targetId, {
      pageNo: pagination.value.current,
      pageSize: pagination.value.pageSize,
    });

    comments.value = result.list || [];
    pagination.value.total = result.total || 0;
  } catch (error) {
    message.error('加载评论失败');
  } finally {
    loading.value = false;
  }
}

// 点赞/取消点赞
async function handleLike(comment: CommentApi.Comment) {
  try {
    const wasLiked = comment.isLiked;
    await toggleLike(comment.id);
    // 切换状态
    comment.isLiked = !wasLiked;
    comment.likeCount += comment.isLiked ? 1 : -1;
  } catch (error) {
    message.error('操作失败');
  }
}

// 分页变化
function handlePageChange(page: number) {
  pagination.value.current = page;
  loadComments();
}

// 刷新评论
function handleRefresh() {
  loadComments();
  emit('refresh');
}

onMounted(() => {
  loadComments();
});

// 暴露方法给父组件
defineExpose({
  refresh: handleRefresh,
});
</script>

<template>
  <div class="comment-list">
    <Spin :spinning="loading">
      <!-- 评论列表 -->
      <div v-if="visibleComments.length > 0" class="space-y-4">
        <CommentItem
          v-for="comment in visibleComments"
          :key="comment.id"
          :comment="comment"
          :show-replies="showReplies"
          @like="handleLike"
          @reply="handleRefresh"
        />
      </div>

      <!-- 空状态 -->
      <Empty v-else-if="!loading" description="暂无评论" class="my-8">
        <template #image>
          <IconifyIcon
            icon="lucide:message-circle"
            class="text-4xl text-gray-400"
          />
        </template>
      </Empty>

      <!-- 分页 -->
      <div v-if="visibleComments.length > 0" class="mt-6 text-center">
        <Button
          v-if="pagination.current * pagination.pageSize < pagination.total"
          @click="handlePageChange(pagination.current + 1)"
          :loading="loading"
        >
          加载更多
        </Button>
      </div>
    </Spin>
  </div>
</template>

<style scoped>
.comment-list {
  @apply w-full;
}
</style>
